<template>
    <div class="main">
        <div class="title">
            <div class="c-title">
                <span>激活超值服务</span>
            </div>
        </div>
        <div class="activity-box">
            <div class="form-box">
                <van-field style="border:false;" v-model="form.CouponCode" label="激活码" required placeholder="请输入激活码" input-align="right" />
                <van-field style="" v-model="form.CompanyName" label="公司名称" required placeholder="请输入公司名称" input-align="right" />
                <van-field style="" v-model="form.ChnName" label="姓名" required placeholder="请输入姓名" input-align="right" />
                <van-field style="" v-model="form.Mobile" label="手机号" required placeholder="请输入手机号" input-align="right" />
                <van-field v-model="form.VerifyCode" center clearable placeholder="请输入验证码">
                    <template #button>
                        <van-button :disabled="isdisabled" size="small" type="info" @click="_getCode">{{ timer }}</van-button>
                    </template>
                </van-field>
                <!-- <div align="center">
                <slide-verify 
                    ref="slideblock"
                    @again="onAgain"
                    @fulfilled="onFulfilled"
                    @success="onSuccess"
                    @fail="onFail"
                    @refresh="onRefresh"
                    :accuracy="accuracy"
                    :slider-text="text"
                    :l="42"
                    :r="10"
                    :w="screenWidth"
                    :h="140"
                ></slide-verify>
                <div>{{msg}}</div>
            </div> -->
                <div style="margin: 10px">
                    <van-button class="br-5" block type="info" @click="onSubmit">
                        立即激活
                    </van-button>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="content-title">
                <span>使用注意事项</span>
            </div>
            <div class="content-item content-one">
                1.请填写激活码、公司名称、姓名、手机号，完成权益绑定。
            </div>
            <div class="content-item content-two">
                2.点击立即激活后，可前往企业宝-更多服务-防灾预警-益戈风控，使用益戈风控服务。
            </div>
            <div class="content-item content-three">
                3.每个公司只能激活一次卡券权益，在卡券的有效期内无需重复激活。
            </div>
            <div class="content-item content-four">
                4.激活权益问题，请咨询客服：400-9280-822。
            </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { Toast, Form } from 'vant'
import { SendSms } from "@/api/public";
import { activate } from '@/api/PAPublic'
import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);
var wait = 60;
export default {
    components: {},
    data() {
        return {
            code: '',
            msg: '',
            text: '向右滑动滑块填充拼图',
            // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
            accuracy: 1,
            screenWidth: document.body.clientWidth - 100,
            timer: "获取验证码",
            isdisabled: false,
            form: {
                CouponCode: '',
                VerifyCode: '',
                CompanyName: '',
                ChnName: '',
                Mobile: '',
                UserId: '',
                silence: true,
            },
        }
    },
    created() {
        this.form.CouponCode = this.$route.query.realRedemptionCode || this.getUrlCode().realRedemptionCode;
        this.form.UserId = this.$route.query.userId || this.getUrlCode().userId;
        this.$store.commit("setEnvCode", "qyb");
    },
    methods: {
        // 获取验证码
        _getCode() {
            if (!/^1[3-9]\d{9}$/.test(this.form.Mobile)) {
                this.$toast('请输入正确的手机号')
                return
            }
            this.time()
            // 发送请求,用post方式
            const data = {
                mobile: this.form.Mobile,
            }
            //let params = { mobile: this.form.Mobile };
            // verifyCode(params).then((res) => {
            //   if (res.success) {
            //     console.log('获取成功')
            //   }
            // })
            // .catch((err) => {
            //     console.log('获取失败')
            //     failure("获取手机验证码失败!");
            // });
            SendSms(data)
                .then((res) => {
                    if (res.success) {
                        console.log('获取成功')
                    }
                })
                .catch((err) => {
                    console.log('获取失败')
                })
        },
        // 倒计时
        time() {
            var that = this;
            if (wait == 0) {
                that.code = "";
                wait = 60;
                this.isdisabled = false;
            } else {
                that.code = wait + "s" + "重新发送";
                wait--;
                if (wait == 0) {
                    this.timer = "重新发送";
                    this.isdisabled = false;
                } else {
                    this.timer = wait + "秒后重新发送";
                    this.isdisabled = true;
                }
                setTimeout(function () {
                    that.time();
                }, 1000);
            }
        },

        // 表单提交
        onSubmit() {
            if (!this.form.CouponCode) {
                this.$toast('请输入激活码')
                return
            }
            if (!this.form.CompanyName) {
                this.$toast('请输入公司名称')
                return
            }
            if (!this.form.ChnName) {
                this.$toast('请输入姓名')
                return
            }
            if (!/^1[3-9]\d{9}$/.test(this.form.Mobile)) {
                this.$toast('请输入正确的手机号')
                return
            }
            if (!this.form.VerifyCode) {
                this.$toast('请输入验证码')
                return
            }
            Toast.loading({
                duration: 0,
                message: '激活中',
                forbidClick: true,
                loadingType: 'spinner',
            });
            this.form.silence = true;
            activate(this.form)
                .then((res) => {
                    if (res.success && res.data.UserName) {
                        Toast.clear();
                        // 修改登陆状态
                        this.$store.commit("updateLogin", true);
                        // 把token存入store
                        this.$store.commit("updateToken", res.data.UserName);
                        // 把用户名存入store
                        this.$store.commit("updateUserName", res.data.UserName);
                        // 把用户名存入store
                        this.$store.commit("updateChnName", res.data.ChnName);
                        // 保存地址 updateArea
                        this.$store.commit("updateArea", res.data.ApplyArea);
                        // 保存地址 updateArea
                        this.$store.commit("updateCompanySysType", res.data.CompanySysType);
                        // 公司code
                        this.$store.commit("updateCompanyCode", res.data.CompanyCode);
                        // 模块
                        this.$store.commit("setIsTempUser", res.data.IsTempUser);
                        this.$store
                            .dispatch("getRoles", res.data.UserKind)
                            .then((data) => {
                                console.log(data);
                            })
                            .catch((_) => {
                                Toast.fail("激活失败")
                            });
                        setTimeout(() => {
                            this.$router.push(
                                "/index?num=" + Math.ceil(Math.random() * 100000)
                            );
                        }, 1500);
                    } else {
                        Toast.fail(res.errorText)
                    }
                })
                .catch((err) => {
                    Toast.fail(err.message)
                    console.log(err.message)
                })
        },
        onSuccess(times) {
            //console.log('验证通过，耗时 +' times + '毫秒');
            //this.msg = 'login success, 耗时${(times / 1000).toFixed(1)}s'
        },
        onFail() {
            console.log('验证不通过');
            this.msg = ''
        },
        onRefresh() {
            console.log('点击了刷新小图标');
            this.msg = ''
        },
        onFulfilled() {
            console.log('刷新成功啦！');
        },
        onAgain() {
            console.log('检测到非人为操作的哦！');
            this.msg = 'try again';
            // 刷新
            this.$refs.slideblock.reset();
        },
        handleClick() {
            // 父组件直接可以调用刷新方法
            this.$refs.slideblock.reset();
        },
        getUrlCode() {
            // 截取url中的code方法
            var url = location.search;
            this.winUrl = url;
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                var strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
                }
            }
            return theRequest;
        },
    }
}
</script>
<style lang="less" scoped>
.main {
    // background-color: #399bff;
    background: url("../../assets/Images/AppIcon/pa_coupon.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    background-color: #0a82ff;
}
.title {
    flex: 1.6;
    .c-title {
        padding: 1.2rem 0 0 0;
        font-size: 55px;
        font-family: "Times New Roman", Times, serif;
        font-weight: bold;
        text-align: center;
        letter-spacing: 1px;
        color: rgb(255, 255, 255);
        line-height: 0.503;
        text-shadow: 4.096px 2.868px 4px rgba(0, 0, 0, 0.14);
        -moz-transform: matrix(0.67092752788065, 0, 0, 0.67092752788065, 0, 0);
        -webkit-transform: matrix(
            0.67092752788065,
            0,
            0,
            0.67092752788065,
            0,
            0
        );
        -ms-transform: matrix(0.67092752788065, 0, 0, 0.67092752788065, 0, 0);
    }
}
.activity-box {
    // background-color: #399bff;
    position: relative;
    padding: 0px 20px 0px 20px;
    flex: 4;
    .form-box {
        padding: 20px 15px 15px 15px;
        background-color: #fff;
        border-radius: 20px;
        box-shadow: 2px 2px 6px #ccc;
    }
}
.content {
    flex: 6;
    color: rgb(255, 255, 255);
    .content-title {
        // font-family: "Times New Roman", Times, serif;
        // font-weight: bold;
        text-align: center;
        line-height: 0.8rem;
    }
    .content-item {
        line-height: 0.6rem;
        font-size: 12pt;
        padding-left: 0.4rem;
    }
    .content-one {
        padding-top: 0.2rem;
    }
    .content-two {
        padding-top: 0.8rem;
    }
    .content-three {
        padding-top: 0.6rem;
    }
    .content-four {
        padding-top: 0.6rem;
    }
}
/deep/ .van-field__label {
    width: 90px;
}
/deep/ .van-cell {
    padding: 0.2rem 0.36rem;
}
</style>